<template>
  <!-- 对话框配置项: 关闭时销毁-->
  <el-dialog
    v-model="dialogs.user.update"
    title="修改账号信息"
    destroy-on-close
    width="300px"
  >
    <el-form status-icon :model="formRes" :rules="rulesRes" ref="formResr">
      <el-form-item prop="name">
        <el-input
          maxlength="6"
          show-word-limit
          v-model="formRes.name"
          placeholder="修改用户名"
        ></el-input>
      </el-form-item>
      <el-form-item prop="psd">
        <el-input
          type="password"
          show-password
          v-model="formRes.psd"
          placeholder="修改密码"
        ></el-input>
      </el-form-item>
      <!-- <el-form-item prop="surepsd">
            <el-input
              v-model="formRes.surepsd"
              placeholder="请确认修改后的密码"
              type="password"
              show-password
              @blur="confirmFunc"
            ></el-input>
          </el-form-item> -->
      <el-form-item prop="phone">
        <el-input
          maxlength="11"
          show-word-limit
          v-model="formRes.phone"
          oninput="value=value.replace(/[^\d]/g,'')"
          placeholder="修改联系方式"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogs.user.update = false">取消</el-button>
        <el-button type="primary" @click="submit"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import userApi from '@/apis/user.js'
import { ElMessage } from 'element-plus'
import { useDialogsStore } from '@/stores/dialogs' // 使用pinia
import { useUserStore } from '@/stores/user'

const { dialogs } = useDialogsStore()
const { user } = useUserStore()
const id = localStorage.getItem('userId')
onMounted(() => {
  userApi.getById(id).then((res) => {
    // console.log(res.result[0])
    console.log(res.result[0])
    formRes.name = res.result[0].user_name
    formRes.psd = res.result[0].user_password
    formRes.phone = res.result[0].user_phone
  })
})
const formRes = reactive({
  name: '',
  psd: '',
  // surepsd: '',
  // truname: '',
  phone: '',
})
// 定义注册的表单校验规则
const rulesRes = {
  psd: [
    { required: true, message: '密码不能为空', trigger: 'blur' },
    { min: 6, max: 10, message: '密码长度在6~10个字符', trigger: 'blur' },
  ],
  // truname: [
  //   { required: true, message: '真实姓名不能为空', trigger: 'blur' },
  //   { min: 2, max: 5, message: '用户名长度在2~5个字符', trigger: 'blur' },
  // ],
  phone: [
    { required: true, message: '联系方式不能为空', trigger: 'blur' },
    { min: 6, max: 11, message: '用户名长度在6~11个字符', trigger: 'blur' },
  ],
}
// 定义响应式数据
const formResr = ref(null)
// 确认密码校验
// const confirmFunc = () => {
//   if (formRes.surepsd !== formRes.psd) ElMessage.error('密码与确认密码不一致.')
// }
// 注册请求
const submit = () => {
  console.log('修改', formRes)
  formResr.value.validate((valid) => {
    // console.log(valid)
    if (!valid) {
      return false
    }
    // console.log('验证通过')
    userApi
      .edit(id, {
        user_name: formRes.name,
        user_password: formRes.psd,
        user_type: user.role,
        // user_truname: formRes.truname,
        user_phone: formRes.phone,
      })
      .then((res) => {
        console.log(res, '555')
        if (res.code == '0') {
          ElMessage.success('修改成功')
          // closable.value = false
          // formRef.value = ''
        }
      })
      .catch((err) => {
        console.log(err)
      })
  })
  dialogs.user.update = false
}
</script>

<style scoped></style>
